<template>
  <el-tabs
      class="group-tabs"
      v-model="active"
      type="card"
      :stretch="false"
      tab-position="top"
      @tab-click="tabClick"
  >
    <el-tab-pane class="group-tab-pane" label="用户列表" name="users">
      <UserHolderList
          :ref="'users'"
          :hold-type="TYPES.USER"
          :entry="entry"
          :comment="'显示直接在此分组内的所有用户信息'"
          :readonly="true" :load-holders="loadUsers"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import '@/styles/tabs.css'
import {currentNames, SERVERS, TYPES} from '@/stores/conf'
import UserHolderList from '@/widget/holder/UserHolderList.vue'
import {useListTabs} from "@/utils/UseListTabs";
import {loadRealmUserPage} from "@/apis";
import {useStore} from "@/stores";
import {useCurrent} from "@/utils/UseCurrentFunc";
import {ref} from "vue";
import {handleResult} from "@/utils/SystemUtil";

const entry = ref({
  name: currentNames.PLAT_REALM_USER,
  type: TYPES.USER,
  server: SERVERS.REALM
});

const store = useStore();
const {current} = useCurrent(currentNames.PLAT_REALM_USER);
const {active, tabClick, handleCurrent, handleSwitch} = useListTabs('users');

/**
 * 加载分配给当前平台的用户列表信息
 * @param params
 */
const loadUsers = async (params: any) => {
  const groups = [];
  const platform = store.getCurrentPlatform();

  groups.push(current().id);

  const result = await loadRealmUserPage({
    realmId: platform.realmId,
    platformId: platform.id,
    groups: groups,
    ...params
  });

  if (result) {
    handleResult(result.data, ['$lastLoginTime','phone'])
  }

  return result;
}

defineExpose({
  handleCurrent,
  handleSwitch,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}

</style>
